import React, { Component } from 'react';
import "../styles/AddressList.scss"
import { NavBar, Toast } from 'antd-mobile';
import {addresslist,address_delete} from "../api/index"

class AddressList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    async componentDidMount() {
        let res = await addresslist({ userid: localStorage.getItem('userid') });
        // console.log(res)
        this.setState({ list: res.data.data })
    }
    async delete(addressid) {
        let delres = await address_delete({ addressid });
        // console.log(delres.data)
        if (delres.data.code == '200') {
            Toast.show('删除地址成功')
            let res = await addresslist({ userid: localStorage.getItem('userid') });
            // console.log(res)
            this.setState({ list: res.data.data })
        }

    }
    update(item){
        this.props.history.push({pathname:'/addressupdate',state:{item}});
    }
    render() {
        return (
            <div className='addresslist'>
                <NavBar className='header' onBack={() => { this.props.history.go(-1) }}>地址列表</NavBar>
                <div className="list">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="left">
                                        <div className="top">
                                            <span className="name">{item.name}</span>
                                            <span className="tel">{item.tel}</span>
                                            <span className={item.isDefault ? 'show default' : 'default'}>默认</span>
                                        </div>
                                        <div className="bottom">
                                            {item.province + item.city + item.county + item.addressDetail}
                                        </div>
                                    </div>
                                    <div className="right">
                                        <span onClick={()=>{this.update(item)}}>编辑</span>
                                        <span className='del' onClick={() => { this.delete(item.addressid) }}>删除</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="footer">
                    <div className="btn" onClick={() => { this.props.history.push('/addressadd') }}>新增地址</div>
                </div>
            </div>
        );
    }
}

export default AddressList;